<template>
  <div>
    <!-- 标题 -->
    <mall-shelf :title="title" />

    <!-- 客户信息 -->
    <mall-shelf title="出库单信息">
      <div slot="content">
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">客户名称</el-col>
            <el-col :span="6" class="table-cell-title">订单号</el-col>
            <el-col :span="6" class="table-cell-title">预计到货时间</el-col>
            <el-col :span="6" class="table-cell-title">仓库</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              {{ tbWmsMaterialDelivery.customerName }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ tbWmsMaterialDelivery.orderNo }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ tbWmsMaterialDelivery.preDeliveryTime }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ tbWmsMaterialDelivery.warehouseCode }}
            </el-col>
          </el-row>


        </div>
      </div>
    </mall-shelf>
    <!-- 商品清单 -->
    <mall-shelf title="出库明细清单">
      <div slot="right" />
      <div slot="content">
        <div class="box-inner ui-cart">
          <div>
            <!--列表-->
            <el-table ref="itemTable" :data="tbWmsMaterialDelivery.receitems" style="width: 100%;" border
           	stripe highlight-current-row @selection-change="handleSelectionChange" >
            	<el-table-column type="selection" width="40" align="center" />
             <el-table-column label="存储库位" align="center" >
             <template slot-scope="scope">
                 {{ scope.row.locationNo }}
               </template>
                </el-table-column>
             <el-table-column label="出库单号" align="center" >
             <template slot-scope="scope">
                 {{ scope.row.orderNo }}
               </template>
                </el-table-column>
                <el-table-column label="发货查询" align="center" >

                  <template slot-scope="scope">
                    <a @click="toFreightDetail(scope.row.orderNo)">{{ scope.row.freightOrderNo }}</a>
                  </template>
                   </el-table-column>

              	<el-table-column label="物品号" align="center" >
              	<template slot-scope="scope">
              	    {{ scope.row.materialNo }}
              	  </template>
              	   </el-table-column>
              		<el-table-column label="物品名称" align="center" >
              		<template slot-scope="scope">
              		    {{ scope.row.materialName }}
              		  </template>
              		   </el-table-column>
                     <el-table-column label="数量" align="center" >
                     <template slot-scope="scope">
                         {{ scope.row.quantity }}
                       </template>
                        </el-table-column>
                    <el-table-column label="单位" align="center" >
                    <template slot-scope="scope">
                        {{ scope.row.measUnitNo }}
                      </template>
                       </el-table-column>
                   <el-table-column label="入库编号" align="center" >
                   <template slot-scope="scope">
                       {{ scope.row.receiptId }}
                     </template>
                      </el-table-column>
              		<el-table-column label="业务单号" align="center" >
              		<template slot-scope="scope">
              		    {{ scope.row.batchNo }}
              		  </template>
              		   </el-table-column>
              		<el-table-column label="状态" align="center" >
              		<template slot-scope="scope">
              		    {{ scope.row.status }}
              		  </template>
              		   </el-table-column>


              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
           <!--   <el-button v-if="scope.row.itemStockQty === null" size="small" type="primary" icon="el-icon-plus" @click="handleAddShare(scope.row)">共享库存调货</el-button>
 -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 合计 -->
          <div v-loading="quoteLoading" class="cart-bottom-bg fix-bottom">
            <div class="fix-bottom-inner">
              <div class="shipping">
                <div class="shipping-box" style="padding: 0 40px;">
                  <div class="shipping-total shipping-price">
                    <h4 class="highlight">应收总额：<em>￥{{ Number(tbWmsMaterialDelivery.totalMoney).toFixed(2) }}</em></h4>
                  </div>
                </div>
                <mall-button
                  class="big-main-btn; main-btn"
                  style="margin: 2px;width: 100px;height: 50px;line-height: 50px;font-size: 16px"
                  text="提交订单"
                  @btnClick="handleSubmit"
                />
              <!--  <mall-button
                  class="big-main-btn; main-btn"
                  style="margin: 2px;width: 100px;height: 50px;line-height: 50px;font-size: 16px"
                  text="生成提案"
                  @btnClick="openQuotePopup"
                /> -->
                <mall-button
                  class="big-main-btn; main-btn"
                  style="margin: 2px;width: 100px;height: 50px;line-height: 50px;font-size: 16px"
                  text="签订合同"
                  @btnClick="handleSignContract"
                />

                <mall-button
                  class="big-main-btn; main-btn"
                  style="margin: 2px;width: 100px;height: 50px;line-height: 50px;font-size: 16px"
                  text="支付查看"
                  @btnClick="handleConfirmPay"
                />
                <mall-button
                  class="big-main-btn; main-btn"
                  style="margin: 2px;width: 100px;height: 50px;line-height: 50px;font-size: 16px"
                  text="发起采购"
                  @btnClick="openPurchase"
                />
               <!-- <mall-button
                  class="big-main-btn; main-btn"
                  style="margin: 2px;width: 100px;height: 50px;line-height: 50px;font-size: 16px"
                  text="共享库存调货"
                  @btnClick="openShareProduct"
                /> -->
                <mall-button
                  class="big-main-btn; main-btn"
                  style="margin: 2px;width: 100px;height: 50px;line-height: 50px;font-size: 16px"
                  text="物流发货"
                  @btnClick="openDelivery"
                />
                <!--<mall-button
                  class="big-main-btn; default-btn"
                  style="margin: 2px;width: 100px;height: 50px;line-height: 50px;font-size: 16px"
                  text="取消订单"
                  @btnClick="handleCancelOrder"
                />-->
              </div>
            </div>
          </div>
          <mall-popup :title="quotePopupTitle" :open="quotePopupVisible" @close="quotePopupVisible=false">
            <div slot="content" class="md">
              <div>
                <input v-model="quoteName" type="text" placeholder="请输入提案名称">
              </div>
              <mall-button text="提交" class="btn" :class-style="btnHighlight?'main-btn':'disabled-btn'" @btnClick="handleGenQuote()" />
            </div>
          </mall-popup>
        </div>
      </div>
    </mall-shelf>
    <mall-shelf title="库位库存情况">
      <div slot="right" />
      <div slot="content">
        <div class="box-inner ui-cart">
          <div>
            <!--列表-->
            <el-table ref="itemTable" :data="tbWmsMaterialDelivery.locationItems" style="width: 100%;" border>
              <el-table-column label="供应商" align="center">
                <template slot-scope="scope">
                  {{ scope.row.supplierName }}
                </template>
              </el-table-column>
              <el-table-column label="型号" align="center" prop="model" />
              <el-table-column label="图片" align="center">
                <template slot-scope="scope">
                  <a :title="scope.row.spuName" target="_blank" @click="toGoodsDetail(scope.row.skuId)">
                    <img :alt="scope.row.spuName" :src="attachUrl(scope.row.image)">
                  </a>
                </template>
              </el-table-column>
              <el-table-column label="价格" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price" placeholder="请输入价格，单位" type="number" @change.native="handleCalcTotalMoney" />
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.qty" placeholder="请输入数量" type="number" @change.native="handleCalcTotalMoney" />
                </template>
              </el-table-column>
              <el-table-column label="小计" align="center">
                <template slot-scope="scope">
                  ¥ {{ Number(scope.row.price * scope.row.qty).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column label="详细" align="center">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" icon="el-icon-plus" @click="handleItemView(scope.row)">查看</el-button>

                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                 <el-button v-if="scope.row.finStatus === null" size="small" type="primary" icon="el-icon-plus" @click="openFinCreditBill(scope.row)">开具惠单</el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 合计 -->





        </div>
      </div>
    </mall-shelf>
    <mall-shelf title="应收结算数据">
      <div slot="right" />
      <div slot="content">
        <div class="box-inner ui-cart">
          <div>
            <!--列表-->
            <el-table ref="itemTable" :data="tbWmsMaterialDelivery.lineArs" style="width: 100%;" border>
              <el-table-column label="单号" align="center">
                <template slot-scope="scope">
                  {{ scope.row.creditBillNo }}
                </template>
              </el-table-column>
             <el-table-column label="开单金额" align="center" sortable width="150" prop="amount" />
              <el-table-column label="买家公司" align="center" sortable width="170" prop="buyerName" />
              <el-table-column label="状态" align="center">
               <template slot-scope="scope">
                  <span>{{ scope.row.status | billStatusFilter }}</span>
                </template>
              </el-table-column>
                 <el-table-column label="卖家公司" align="center" show-overflow-tooltip prop="salerName" sortable width="130"/>
             <!-- <el-table-column label="价格" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price" placeholder="请输入价格，单位" type="number" @change.native="handleCalcTotalMoney" />
                </template>
              </el-table-column> -->
                 <el-table-column label="收单企业" align="center" prop="receiverName" sortable  width="150"/>
            <el-table-column label="期限（天）" align="right"  prop="validateLength" />

                 <el-table-column label="兑付方式" align="center" prop="paymentType" />
            <el-table-column label="开单日" align="center" prop="openDate" width="160">
                   <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.openDate) }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="到期日" align="center" prop="validatedTo" width="160">
                   <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.validatedTo) }}</span>
                  </template>
                </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                <el-button v-hasPermission="['baoli:finCreditBill:search']" v-if="scope.row.status === `CHECKED`" type="primary" icon="el-icon-search" size="small" @click="handleView(scope.row)">签收</el-button>
                <el-button v-if="scope.row.status === `SENT`" type="primary" icon="el-icon-search" size="small" @click="handleCashOutView(scope.row)">贴现融资</el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 合计 -->
          <div v-loading="quoteLoading" class="cart-bottom-bg fix-bottom">
            <div class="fix-bottom-inner">
              <div class="shipping">
                <div class="shipping-box" style="padding: 0 40px;">
                  <div class="shipping-total shipping-price">
                    <h4 class="highlight">应收总额：<em>￥{{ Number(tbWmsMaterialDelivery.totalMoney).toFixed(2) }}</em></h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <mall-popup :title="quotePopupTitle" :open="quotePopupVisible" @close="quotePopupVisible=false">
            <div slot="content" class="md">
              <div>
                <input v-model="quoteName" type="text" placeholder="请输入提案名称">
              </div>
              <mall-button text="提交" class="btn" :class-style="btnHighlight?'main-btn':'disabled-btn'" @btnClick="handleGenQuote()" />
            </div>
          </mall-popup>
        </div>
      </div>
    </mall-shelf>
    <div class="dialog_container">
      <!--复核-->
      <el-dialog
        :title="purchaseDeliveryDialog.title"
        :close-on-click-modal="false"
        :before-close="closePurchaseDialog"
        :visible.sync="purchaseDeliveryDialog.visible"
        width="75%"
      >

        <el-form :model="purchaseDeliveryDialogData" label-position="right" label-width="120px" class="dialog_form">
          <div>
            <!--列表-->

           <el-table ref="itemTable" :data="purchaseDeliveryItems" style="width: 100%;" border
            stripe highlight-current-row @selection-change="handleSelectionChange" >
            	<el-table-column type="selection" width="40" align="center" />
              <el-table-column label="商品" align="center">
                <template slot-scope="scope">
                        {{ scope.row.spuName }}
                      </template>
                    </el-table-column>
                <!--    <el-table-column label="型号" align="center" prop="spec" /> -->
                    <el-table-column label="图片" align="center">
                      <template slot-scope="scope">
                        <a :title="scope.row.spuName" target="_blank" @click="toGoodsDetail(scope.row.skuId)">
                          <img :alt="scope.row.spuName" :src="scope.row.image">
                        </a>
                      </template>
                    </el-table-column>
                    <el-table-column label="价格" align="center">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.price" placeholder="请输入价格，单位" type="number" @change.native="handleCalcTotalMoney" />
                      </template>
                      </el-table-column>
                      <el-table-column label="数量" align="center">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.qty" placeholder="请输入数量" type="number" @change.native="handleCalcTotalMoney" />
                        </template>
                      </el-table-column>
                      <el-table-column label="小计" align="center">
                        <template slot-scope="scope">
                          ¥ {{ Number(scope.row.price * scope.row.qty).toFixed(2) }}
                        </template>
                      </el-table-column>
                      <el-table-column label="采购状态" align="center">
                      <template slot-scope="scope">
                          {{ scope.row.purchaseStatus }}
                        </template>
                      </el-table-column>
                      <el-table-column label="选择供应商" align="center">
                        <template slot-scope="scope">
                          <el-select v-model="scope.row.supplierNo" placeholder="请选择供应商" clearable size="small" @focus="loadSupplierBySpu(scope.row.spuId)">
                            <el-option v-for="option in options.suppliers" :key="option.supplierId" :label="option.supplierName" :value="option.supplierId" />
                          </el-select>
                        </template>
                      </el-table-column>
                      </el-table>
                            </div>
                          </el-form>
                          <div slot="footer" class="dialog-footer">
                            <el-button @click="closePurchaseDialog()">取消</el-button>
                            <el-button type="primary" @click="confirmPurchaseDialog()">保存</el-button>
                          </div>
                        </el-dialog>
                      </div>
    <div class="dialog_container">
      <!--复核-->
      <el-dialog
        :title="purchaseDialog.title"
        :close-on-click-modal="false"
        :before-close="closePurchaseDialog"
        :visible.sync="purchaseDialog.visible"
        width="75%"
      >

        <el-form :model="purchaseDialogData" label-position="right" label-width="120px" class="dialog_form">
          <div>
            <!--列表-->

           <el-table ref="itemTable" :data="tbWmsMaterialDelivery.receitems" style="width: 100%;" border
            stripe highlight-current-row @selection-change="handleSelectionChange" >
            	<el-table-column type="selection" width="40" align="center" />
              <el-table-column label="商品" align="center">
                <template slot-scope="scope">
                  {{ scope.row.spuName }}
                </template>
              </el-table-column>
          <!--    <el-table-column label="型号" align="center" prop="spec" /> -->
              <el-table-column label="图片" align="center">
                <template slot-scope="scope">
                  <a :title="scope.row.spuName" target="_blank" @click="toGoodsDetail(scope.row.skuId)">
                    <img :alt="scope.row.spuName" :src="scope.row.image">
                  </a>
                </template>
              </el-table-column>
              <el-table-column label="价格" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price" placeholder="请输入价格，单位" type="number" @change.native="handleCalcTotalMoney" />
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.qty" placeholder="请输入数量" type="number" @change.native="handleCalcTotalMoney" />
                </template>
              </el-table-column>
              <el-table-column label="小计" align="center">
                <template slot-scope="scope">
                  ¥ {{ Number(scope.row.price * scope.row.qty).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column label="采购状态" align="center">
              <template slot-scope="scope">
                  {{ scope.row.purchaseStatus }}
                </template>
              </el-table-column>
              <el-table-column label="选择供应商" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.supplierNo" placeholder="请选择供应商" clearable size="small" @focus="loadSupplierBySpu(scope.row.spuId)">
                    <el-option v-for="option in options.suppliers" :key="option.supplierId" :label="option.supplierName" :value="option.supplierId" />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closePurchaseDialog()">取消</el-button>
          <el-button type="primary" @click="confirmPurchaseDialog()">保存</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="dialog_container">
      <!--复核-->


      <el-dialog
        :title="deliveryDialog.title"
        :close-on-click-modal="false"
        :before-close="closeDeliveryDialog"
        :visible.sync="deliveryDialog.visible"
        width="75%"
      >

        <el-form :model="deliveryDialogData" label-position="right" label-width="120px" class="dialog_form">
          <div>
            <!--列表-->
          <el-row>
            <el-col :span="6" class="table-cell-title">发货人</el-col>
            <el-col :span="6" class="table-cell-title">发货人电话</el-col>
            <el-col :span="6" class="table-cell-title">省市区</el-col>
            <el-col :span="6" class="table-cell-title">提货地址</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              {{ tbWmsMaterialDelivery.shipperName }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ tbWmsMaterialDelivery.shipperPhone }}
            </el-col>
            <el-col :span="6" class="table-cell">
              <el-cascader v-model="selectedShipperRegion" :options="options.regionOptions" :props="{value: 'id', label: 'regionName'}" style="width: 100%" placeholder="请选择省市区" clearable />
            </el-col>
            <el-col :span="6" class="table-cell">
              <el-input v-model="tbWmsMaterialDelivery.pickupAddress" placeholder="请输入详细地址" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">收货人</el-col>
            <el-col :span="6" class="table-cell-title">收货人电话</el-col>
            <el-col :span="6" class="table-cell-title">省市区</el-col>
            <el-col :span="6" class="table-cell-title">详细地址</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              {{ tbWmsMaterialDelivery.receiver }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ tbWmsMaterialDelivery.receiverPhone }}
            </el-col>
            <el-col :span="6" class="table-cell">
              <el-cascader v-model="selectedRegion" :options="options.regionOptions" :props="{value: 'id', label: 'regionName'}" style="width: 100%" placeholder="请选择省市区" clearable />
            </el-col>
            <el-col :span="6" class="table-cell">
              <el-input v-model="tbWmsMaterialDelivery.receiverAddress" placeholder="请输入详细地址" />
            </el-col>
          </el-row>
           <el-table ref="itemTable" :data="tbWmsMaterialDelivery.items" style="width: 100%;" border
            stripe highlight-current-row @selection-change="handleSelectionChange" >
            	<el-table-column type="selection" width="40" align="center" />
              <el-table-column label="商品" align="center">
                <template slot-scope="scope">
                  {{ scope.row.spuName }}
                </template>
              </el-table-column>
          <!--    <el-table-column label="型号" align="center" prop="spec" /> -->
              <el-table-column label="图片" align="center">
                <template slot-scope="scope">
                  <a :title="scope.row.spuName" target="_blank" @click="toGoodsDetail(scope.row.skuId)">
                    <img :alt="scope.row.spuName" :src="scope.row.image">
                  </a>
                </template>
              </el-table-column>
              <el-table-column label="价格" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price" placeholder="请输入价格，单位" type="number" @change.native="handleCalcTotalMoney" />
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.qty" placeholder="请输入数量" type="number" @change.native="handleCalcTotalMoney" />
                </template>
              </el-table-column>
              <el-table-column label="小计" align="center">
                <template slot-scope="scope">
                  ¥ {{ Number(scope.row.price * scope.row.qty).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column label="采购状态" align="center">
              <template slot-scope="scope">
                  {{ scope.row.purchaseStatus }}
                </template>
              </el-table-column>
              <el-table-column label="选择供应商" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.supplierNo" placeholder="请选择供应商" clearable size="small" @focus="loadSupplierBySpu(scope.row.spuId)">
                    <el-option v-for="option in options.suppliers" :key="option.supplierId" :label="option.supplierName" :value="option.supplierId" />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDeliveryDialog()">取消</el-button>
          <el-button type="primary" @click="confirmDeliveryDialog()">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import MallShelf from '@/components/MallShelf'
import GoodsSupplierApi from '@/api/pms/GoodsSupplierApi'
import DictValueApi from '@/api/system/DictValueApi'
import MallPopup from '@/components/MallPopup'
import MallButton from '@/components/MallButton'
import CustomerApi from '@/api/basic/CustomerApi'
import RegionApi from '@/api/system/RegionApi.js'
import QuoteApi from '@/api/order/QuoteApi'
import appConstant from '@/constant/AppConstant'
import TbWmsMaterialDeliveryApi from '@/api/web/TbWmsMaterialDeliveryApi'
export default {
  	name: 'OrderDetail',
  filters: {
    billStatusFilter(item) {
      const values = appConstant.proveStatusList.filter(value => value.key === item)
      if (values && values.length > 0) {
        return values[0].label
      } else {
        return ''
      }
    }
   },
  components: {
    MallShelf,
    MallPopup,
    MallButton
  },
  data() {
    return {
      options: {
        orderTypeOptions: [],
        sourceTypeOptions: [],

        regionOptions: [],
        suppliers: [],
        customerOptions: []
      },

      orderId: '',
      orderStatus: 0,
      tbWmsMaterialDelivery: {
        receitems: [],
        locationItems: [],
        lineArs: [],
        orderStatus: 0,
        ids: [],
         id: null,
        spuIds: [],
        suppliers: [],
        prices: [],
        orderNo: '',
        pickupAddress: '',
        shipperName: '',
        shipperPhone: '',
        pickupCity: '',
        nums: []
      },
 purchaseDeliveryDialog: {
        title: '采购物流详细',
        visible: false
      },
      purchaseDeliveryDialogData: {
      purchaseDeliveryItems: [],
        remark: null,
       id: null
      },
      deliveryDialog: {
        title: '物流发货',
        visible: false
      },
      deliveryDialogData: {

        remark: null,
       id: null
      },
      purchaseDialog: {
        title: '选择采购商',
        visible: false
      },
      purchaseDialogData: {
       proveStatus: null,
        remark: null,
       id: null
      },
      isSingle: true,
      isMultiple: true,
      selectedRegion: [], // 选中省市区的值
      selectedShipperRegion: [],
     	multipleSelection: [],
      loading: true,
      quoteLoading: false,
      quotePopupTitle: '提案信息',
      quotePopupVisible: false,
      quoteName: null
    }
  },
  computed: {
    title() {
  //    return '订单号：' + this.salesOrder.salesOrderNo + ' 订单状态：' + this.orderStatusFormat(this.salesOrder.orderStatus)
    },
    btnHighlight() {
      return this.quoteName
    }
  },
  watch: {
    selectedRegion(val, oldVal) {
      if (val != null) {
      //  this.salesOrder.receiverProvince = val[0]
      //  this.salesOrder.receiverCity = val[1]
      //  this.salesOrder.receiverDistrict = val[2]
      } else {
       // this.salesOrder.receiverProvince = null
      //  this.salesOrder.receiverCity = null
       // this.salesOrder.receiverDistrict = null
      }
    },
    selectedShipperRegion(val, oldVal) {
      if (val != null) {
     //   this.salesOrder.province = val[0]
      //  this.salesOrder.city = val[1]
      //  this.salesOrder.district = val[2]
      } else {
      //  this.salesOrder.province = null
     //   this.salesOrder.city = null
       // this.salesOrder.district = null
      }
    }
  },
  created() {
    this.orderId = this.$route.params.id
    this.getOrderDetail()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
      DictValueApi.list({ dictCode: 'oms_sales_order_type' }).then(response => {
        this.options.orderTypeOptions = response.data
      })
      DictValueApi.list({ dictCode: 'oms_sales_order_source' }).then(response => {
        this.options.sourceTypeOptions = response.data
      })
      DictValueApi.list({ dictCode: 'oms_sales_order_status' }).then(response => {
        this.options.salesOrderStatusOptions = response.data
      })
      RegionApi.tree().then(response => {
        this.options.regionOptions = this.$common.list2Tree(response.data)
      })
      CustomerApi.list().then(response => {
        this.options.customerOptions = response.data
      })
      CustomerApi.getMyCustInfor().then(response => {
        this.salesOrder.shipperName=response.data.customerName
        this.salesOrder.shipperNo=response.data.id
      	this.salesOrder.shipperPhone = response.data.contactPhone
      	this.salesOrder.pickupAddress = response.data.address
        this.selectedShipperRegion = [response.data.province, response.data.city, response.data.district]

      })
    },
    // 跳转到商品详情页
    toGoodsDetail(skuId) {
      window.open(window.location.origin + '#/goodsDetail?skuId=' + skuId)
    },
    toFreightDetail(orderId) {
      this.$router.push({
        path: '/tFoFreightOrder/tFoFreightOrderView/' + orderId
      })
    },
    loadSupplierBySpu(spuId) {

    GoodsSupplierApi.list({ spuId: spuId }).then(response => {
      this.options.suppliers = response.data
    })
    },
    getOrderDetail() {
      TbWmsMaterialDeliveryApi.getOrderDetail(this.orderId).then(response => {
        this.tbWmsMaterialDelivery = response.data
        // 显示省市区
      //  this.selectedRegion = [response.data.receiverProvince, response.data.receiverCity, response.data.receiverDistrict]
        this.loading = false
      })
    },
    handleView(row) {
      this.$router.push({ path: `/finCreditBill/finCreditBillView/${row.id}` })
    },
    handleCashOutView(row) {
      this.$router.push({ path: `/finCreditBill/handleCashOutView/${row.id}` })
    },
    // 提交订单后跳转付款页面
    handleSubmit() {
      this.handleCalcTotalMoney()
      SalesOrderApi.submit(this.salesOrder).then(
        res => {
          this.$message.success('提交成功')
          this.getOrderDetail()
        },
        res => {
          this.$message.error(res.message)
        }
      )
    },
    openQuotePopup() {
      this.quotePopupVisible = true
    },
    // 生成提案
    handleGenQuote() {
      this.quotePopupVisible = false
      this.quoteLoading = true
      this.$message.warning('提案生成中，请稍后下载')
      QuoteApi.genQuotePpt({ quoteName: this.quoteName, salesOrderId: this.salesOrder.id }).then(
        response => {
          this.quoteLoading = false
        },
        response => {
          this.quoteLoading = false
        }
      )
    },
    // 签订合同
    handleSignContract() {
      const params = {
        id: this.salesOrder.id,
        contractNo: this.salesOrder.contractNo
      }
      SalesOrderApi.signContract(params).then(response => {
        this.$message.success('合同签订成功')
        this.getOrderDetail()
      })
    },
    // 确认支付
    handleConfirmPay() {
      const params = {
        id: this.salesOrder.id,
        payType: this.salesOrder.payType,
        transactionId: this.salesOrder.transactionId
      }
      SalesOrderApi.confirmPay(params).then(response => {
        this.$message.success('确认支付成功')
        this.getOrderDetail()
      })
    },
   openDelivery() {
      const id = this.salesOrder.id
        this.deliveryDialog.visible = true
        this.deliveryDialogData.id = id
        },
   openPurchase() {
      const id = this.salesOrder.id
        this.purchaseDialog.visible = true
        this.purchaseDialogData.id = id

    /*  const params = {
        id: this.salesOrder.id,
        payType: this.salesOrder.payType,
        transactionId: this.salesOrder.transactionId
      }
      SalesOrderApi.confirmPay(params).then(response => {
        this.$message.success('确认支付成功')
        this.getOrderDetail()
      }) */
    },
 openPuchaseDeliveryDetail() {
      const id = this.salesOrder.id
        this.purchaseDeliveryDialog.visible = true
        this.purchaseDeliveryDialogData.id = id
        const params = {
          purchaseItems: this.purchaseItems
        }
         FreightOrderLineApi.list(params).then(response => {
          this.purchaseDeliveryItems    = response.data
      })
        },
 handleAddShare(row) {
      window.open(window.location.origin + '#/spu/handleAddFromCloudBySku/' + row.id )
    },
    openFinCreditBill(row) {
      window.open(window.location.origin + '#/finCreditBill/finCreditBillAtOrderImport/' + row.id )
    },
    // 确认发货
    handleDelivery() {
      const params = {
        id: this.salesOrder.id,
        expressCompanyName: this.salesOrder.expressCompanyName,
        expressNo: this.salesOrder.expressNo
      }
      SalesOrderApi.delivery(params).then(response => {
        this.$message.success('发货成功')
        this.getOrderDetail()
      })
    },

    confirmDeliveryDialog() {

         this.salesOrder.nums = this.multipleSelection.map(item => item.qty)
          this.salesOrder.ids = this.multipleSelection.map(item => item.id)
       this.salesOrder.spuIds = this.multipleSelection.map(item => item.spuId)
          this.salesOrder.suppliers = this.multipleSelection.map(item => item.supplierNo)
         this.salesOrder.prices = this.multipleSelection.map(item => item.price)
            this.salesOrder.id =this.purchaseDialogData.id


         for (let i = 0; i < this.multipleSelection.length; i++) {
         	const item = this.multipleSelection[i]
         	if (!item.qty) {
         		this.$message.error('采购数量不能空')
         		return false
         	}
           if (item.purchaseStatus=='已采购') {
           	this.$message.error('采购已完成，请勿重复提交采购')
           	return false
           }
    	      if (!item.supplierNo) {
         		this.$alert("请选择需要采购的供应商");
         		return false
         	}
         }

          this.salesOrder.ids = this.multipleSelection.map(item => item.id)
    				if (this.salesOrder.ids === null || this.salesOrder.ids.length === 0) {
    					this.$alert("请选择需要采购的明细");
    					return 0;
    				}

         SalesOrderApi.confirmPurchase(this.salesOrder).then(response => {
           this.$message.success('采购计划生成')
             this.purchaseDialog.visible = false
             this.salesOrderId = this.$route.params.salesOrderId
             this.getOrderDetail()
         })
       },
    closeDeliveryDialog() {
       this.deliveryDialog.visible = false
      },
    confirmPurchaseDialog() {

      this.salesOrder.nums = this.multipleSelection.map(item => item.qty)
       this.salesOrder.ids = this.multipleSelection.map(item => item.id)
    this.salesOrder.spuIds = this.multipleSelection.map(item => item.spuId)
       this.salesOrder.suppliers = this.multipleSelection.map(item => item.supplierNo)
      this.salesOrder.prices = this.multipleSelection.map(item => item.price)
         this.salesOrder.id =this.purchaseDialogData.id


      for (let i = 0; i < this.multipleSelection.length; i++) {
      	const item = this.multipleSelection[i]
      	if (!item.qty) {
      		this.$message.error('采购数量不能空')
      		return false
      	}
        if (item.purchaseStatus=='已采购') {
        	this.$message.error('采购已完成，请勿重复提交采购')
        	return false
        }
	      if (!item.supplierNo) {
      		this.$alert("请选择需要采购的供应商");
      		return false
      	}
      }

       this.salesOrder.ids = this.multipleSelection.map(item => item.id)
				if (this.salesOrder.ids === null || this.salesOrder.ids.length === 0) {
					this.$alert("请选择需要采购的明细");
					return 0;
				}

      SalesOrderApi.confirmPurchase(this.salesOrder).then(response => {
        this.$message.success('采购计划生成')
          this.purchaseDialog.visible = false
          this.salesOrderId = this.$route.params.salesOrderId
          this.getOrderDetail()
      })
    },
 closePurchaseDialog() {
    this.purchaseDialog.visible = false
   },
   handleSelectionChange(selection) {
   	this.multipleSelection = selection
   	this.isSingle = selection.length !== 1
   	this.isMultiple = !selection.length
   },
    handleCancelOrder() {
      SalesOrderApi.cancel().then(res => {
        if (res.success === true) {
          this.getOrderDetail()
        } else {
          this.$message.error('取消失败')
        }
      })
    },
    // 删除订单明细
    handleRemoveItem(row) {
      this.salesOrder.items.splice(this.salesOrder.items.indexOf(row), 1)
    },
    // 计算总金额
    handleCalcTotalMoney() {
      let totalMoney = 0
      this.salesOrder.items && this.salesOrder.items.forEach(item => {
        totalMoney += (item.qty * item.price)
      })
      this.salesOrder.totalMoney = totalMoney
    },
    orderStatusFormat(status) {
      return this.$common.getDictValueName(this.options.salesOrderStatusOptions, status)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/mixin.scss';
.orderStatus {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 50px -150px 20px 60px;
}

.orderStatus-close {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 50px -800px 20px 60px;
}

.status-now {
  background: #F6F6F6;
  border: 1px solid #dadada;
  border-radius: 5px;
  padding: 22px 22px 20px;
  /*margin: 0 30px 30px 30px;*/
  line-height: 38px;
}

.status-title {
  font-size: 18px;
  color: #666;
}

.button {
  float: right;
  margin: -37px 0 20px 0;
}

.realtime {
  border-top: 1px solid #dcdcdc;
  margin-top: 20px;
  padding-top: 26px;
}

.red {
  color: #d44d44;
}

.address {
  line-height: 38px;
  word-wrap: break-word;
  word-spacing: normal;
  word-break: break-all;
  color: #626262;
}

.img-box {
  border: 1px solid #EBEBEB;
  margin-left: -80px;
}

img {
  @include wh(80px);
}

.goods-table {
  .n-b {
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      color: #626262;
      font-weight: 700;
      width: 165px;
      text-align: center;
    }
  }
  .cart-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 110px;
    padding: 15px 0 15px 111px;
    border-bottom: 1px solid #EFEFEF;
    a {
      color: #333;
    }
  }
  .price {
    padding-left: 107px;
  }
  .goods-num {
    padding-left: 60px;
  }
}

.order-discount-line {
  padding: 22px 30px 20px;
  line-height: 24px;
  text-align: right;
  font-size: 12px;
  &:first-child {
    line-height: 32px;
    text-align: right;
    font-size: 14px;
    font-weight: bolder;
  }
}

.gray-sub-title {
  height: 38px;
  padding: 0 24px;
  background: #EEE;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  line-height: 38px;
  font-size: 12px;
  color: #666;
  display: flex;
  span {
    display: inline-block;
    height: 100%;
  }
  .first {
    display: flex;
    justify-content: space-between;
    flex: 1;
    .f-bc {
      > span {
        width: 130px;
        text-align: center;
      }
    }
  }
  .last {
    width: 230px;
    text-align: center;
    display: flex;
    border-left: 1px solid #ccc;
    span {
      flex: 1;
    }
  }
}

.bt {
  border-top: 1px solid #EFEFEF;
}

.date {
  padding-left: 0px;
}

.order-id {
  margin-left: 10px;
}

.cart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  &:hover {
    .del-order {
      display: block;
    }
  }
  .del-order {
    display: none;
  }
  .cart-l {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 15px 0;
    justify-content: space-between;
    position: relative;
    &:before {
      position: absolute;
      content: ' ';
      right: -1px;
      top: 0;
      width: 1px;
      background-color: #EFEFEF;
      height: 100%;
    }
    .ellipsis {
      margin-left: 20px;
      width: 220px;
    }
    .img-box {
      border: 1px solid #EBEBEB;
    }
    img {
      display: block;
      @include wh(80px);
    }
    .cart-l-r {
      display: flex;
      > div {
        text-align: center;
        width: 112px;
      }
    }
    .car-l-l {
      display: flex;
      align-items: center;
    }
  }
  .cart-r {
    width: 230px;
    display: flex;
    span {
      text-align: center;
      flex: 1;
    }
  }
}

.prod-operation {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 254px;
  div {
    width: 100%;
    text-align: center;
  }
  div:last-child {
    padding-right: 24px;
  }
}

.price-total {
  height: 54px;
  line-height: 54px;
  font-size: 18px;
}

.price-red {
  font-weight: 700;
  color: #d44d44;
}

.table-layout {
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.fix-bottom {
  padding: 22px 29px 19px 30px;
  height: 90px;
  width: 100%;
  z-index: 1;
  background-position: center;
  background: #fdfdfd;
  background: -webkit-linear-gradient(#fdfdfd, #f9f9f9);
  background: linear-gradient(#fdfdfd, #f9f9f9);
  border-top: 1px solid #e9e9e9;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, .04);
  .cart-bottom-bg {
    height: 80px;
    border-top: 1px solid #D9D9D9;
    border-radius: 0 0 8px 8px;
  }
  .fix-bottom-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .shipping {
    display: flex;
    align-items: center;
  }
  em {
    display: inline-block;
    position: relative;
    top: 3px;
    margin-top: -4px;
    font-size: 24px;
    color: #d44d44;
    font-weight: 700;
  }
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}

.md {
  > div {
    text-align: left;
    margin-bottom: 15px;
    > input {
      width: 100%;
      height: 50px;
      font-size: 18px;
      padding: 10px 20px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-shadow: 0 3px 5px -4px rgba(0, 0, 0, .4) inset, -1px 0 3px -2px rgba(0, 0, 0, .1) inset;
      line-height: 46px;
    }
  }
}
</style>
